<template>
  <div class="addcategorydish">
    <el-dialog
         title="新增菜品分类"
              :visible.sync="dialogVisible"
              width="400px"

            >
              <el-form  :data="addfrom">
                <el-form-item label="*分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="addfrom.name"
                    style="width: 200px"
                    placeholder="请输入名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="*分类类型" :label-width="formLabelWidth">
                  <el-select
                    v-model="addfrom.type"
                    style="width: 200px"
                    placeholder="请选择"
                  >
                   <el-option label="菜品分类" value="1">菜品分类</el-option>
                   <el-option label="套餐分类" value="2">套餐分类</el-option>

                  </el-select>
                </el-form-item>

                <el-form-item label="*排序" :label-width="formLabelWidth">
                  <el-input
                    v-model="addfrom.sort"
                    style="width: 200px"
                    placeholder="请输入序号"
                  ></el-input>
                </el-form-item>

                 <el-form-item   label="*状态" :label-width="formLabelWidth" style="width: 180px">
                 <el-select  v-model="addfrom.status" placeholder="请选择">
                    <el-option   label="启用"  value="1">启用</el-option>
                    <el-option  label="禁用"  value="2">禁用</el-option>
                    </el-select>
                   </el-form-item>

                <div style="padding-top: 10px;width:330px" >

                  <el-button @click="savehandler(addfrom)"
                    style="margin-left: 60px; width: 80px"
                    type="primary"
                    >保存</el-button
                  >
                  <el-button @click="cancel" style="margin-left: 100px; width: 80px" type="info"
                    >取消</el-button
                  >
                </div>
              </el-form>
   </el-dialog>
  </div>
</template>

<script>
import Bus1 from '@/utils/EventBus'
import { addCategory } from '@/api/category'

export default {
  name: 'addCategory_dish_Index',
  data () {
    return {

      addfrom: {

        name: '',
        type: '',
        sort: '',
        status: ''

      }, // 弹窗数据

      dialogVisible: false,
      formLabelWidth: '80px'

    }
  },
  created () {
    /* 发送弹窗开关 */
    Bus1.$on('category_dish', (dialogVisible) => {
      this.dialogVisible = dialogVisible
    })
  },
  /* 关闭对话 */
  beforeDestroy () {
    Bus1.$off('category_dish')
  },
  methods: {
    async savehandler (addfrom) {
      if (addfrom.name === '') {
        this.$message.error('用户名不能为空')
        return
      } if (!(addfrom.name.length > 0 && addfrom.name.length < 20)) {
        this.$message.error('用户名数量不能超过20')
        return
      }
      if (addfrom.sort.length === '') {
        this.$message.error('排序数字不能为空')
        return
      }
      console.log(addfrom, 'addfrom')
      const res = await addCategory(addfrom)
      console.log(res.data)
      location.reload()// 刷新
    },

    // 取消
    cancel () {
      this.dialogVisible = false
      this.addfrom = ''
    }

  }

}
</script>

<style lang="less" secped>

  .avatar {
    width: 100px;
    height: 100px;

    display: block;
  }
 /deep/ .el-button.el-button--info{
    margin-left:10%;
}
.radiox{
  padding-left: 8px;
}

</style>
